<template>
  <div class="app-container calendar-list-container">
   <div class="filter-container">
        <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="关键字搜索" v-model="search.filename"></el-input>
        <el-button class="filter-item" type="primary" plain v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <br/>
    <!--  相册类别   -->
    <div class="filter-item" >
        <el-radio-group v-model="listQuery.type" @change="phoneType">
            <el-radio label="2" border>头像相册</el-radio>
            <el-radio label="1" border>商品相册</el-radio>
            <el-radio label="3" border>其他相册</el-radio>
        </el-radio-group>
    </div>
    <br/>
    <div class="img-content">
        <el-row :gutter="12">
        <el-col :span="6" v-for="item in listData" :key="item.id">
            <el-card :body-style="{ padding: '1px' }" class="body-style" shadow="hover">
                <img :src="item.image_url" class="image">
                <div style="padding: 10px;">
                    <div class="filename" id="copyObj">{{item.short_url}}</div>
                    <div class="bottom clearfix">
                    <time class="time">{{item.created_at}}</time>
                    <a><span class="copys" @click='handleCopy(item.image_url, $event)'>复制链接</span></a>
                    <el-button type="text" v-roles="'deletePhoto'" class="button" @click="handleDel(item)">删除</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        </el-row>
    </div>    

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
    
  </div>
</template>

<script>

import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API
import waves from '@/directive/waves' // 水波纹指令
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive

export default {
  name: 'phoneList',

  directives: {
    waves, clipboard
  },

  components: { BackToTop },
  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'z-index': '9999',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },
      // 长带参数
      listQuery: {
        page: 1,
        pagesize: 30,
        type: '2'
      },
      // 搜索字段
      search: {
        filename: ''
      },
      total: 0,
      listLoading: false,
      listData: []
    }
  },

  // 初始化数据
  created() {
    this.fetchData()
  },

  // 触动方法
  methods: {
    // 相册类型
    phoneType(v) {
      this.listQuery.pictype = v
      this.listQuery.page = 1
      this.fetchData()
    },

    // 控制每页调数
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.fetchData()
    },

    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },

    // 搜搜
    handleFilter() {
      this.listQuery.page = 1
      this.listQuery = Object.assign(this.listQuery, this.search)
      this.fetchData()
    },

    // 删除
    handleDel(row) {
      this.$confirm('删除后,如果有应用到此图的将无法正常显示. 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = { // 多张则用,隔开
          id: row.id
        }
        api.delPhotoApi(params).then(response => {
          if (response.data.code === 0) {
            const index = this.listData.indexOf(row)
            this.listData.splice(index, 1)
            this.$root.message('已移除指定图片', 'success')
            this.total = this.total - 1
          }
        })
      }).catch(() => {
        this.$root.message('已取消删除', 'info')
      })
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        api.photoListApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.total = parseInt(response.data.total)
          }
          this.listLoading = false
        })
      })
    },

    // 复制功能 20180926
    handleCopy(text) {
      clip(text, event)
    }

  }
}
</script>

<style scoped lang="scss">
  .body-style{
      margin-bottom:7px;
      padding-bottom: 7px;
  }
  .img-content{
    a :hover{
      color: rgb(122, 156, 219)
    }
  }

  #box::-webkit-scrollbar {
      display: none;
  }
  .filename{
      width: 200px;
      height: 50px;
      overflow: auto;
      line-height: 20px;
  }
  .time {
      font-size: 13px;
      color: #999;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .copys{
    font-size: 13px;
    color: #999;
  }
  .image {
    width: 15rem;
    height: 14rem;
    display: block;
    margin-left: 3.5px;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }
</style>
